<template>
	<div>
		<div class="topDiv">
			<div style="width: 8%">时间范围:</div>
			<div style="width: 40%;display: flex;justify-content: space-between">
				<div style="cursor:pointer" :style="timeType==1?'color: rgb(23,119,255)':''" @click="timeType1">全部</div>
				<div style="cursor:pointer" :style="timeType==2?'color: rgb(23,119,255)':''" @click="timeType2">昨天</div>
				<div style="cursor:pointer" :style="timeType==3?'color: rgb(23,119,255)':''" @click="timeType3">近三天
				</div>
				<div style="cursor:pointer" :style="timeType==4?'color: rgb(23,119,255)':''" @click="timeType4">近七天
				</div>
				<div style="cursor: pointer" :style="timeType==5?'color: rgb(23,119,255)':''" @click="timeType5">自定义时间
				</div>
			</div>
			<div :style="showData ?'':'display:none'" style="margin-left: 2%;width: 40%;">
				<a-date-picker v-model="monitorDateStart" format="YYYY-MM-DD" @change="onChange_time" placeholder="开始时间"
				               style="width: 40%;">
					<template slot="renderExtraFooter"></template>
				</a-date-picker>
				<span style="padding-left: 2%;padding-right: 2%;">~</span>
				<a-date-picker v-model="monitorDateEnd" format="YYYY-MM-DD" @change="onChange_time" placeholder="结束时间"
				               style="width: 40%;">
					<template slot="renderExtraFooter"></template>
				</a-date-picker>
			</div>
		</div>
		<div class="topDiv">
			<div style="width: 8%">媒体类型:</div>
			<div style="width: 100%;display: flex;align-items: center">
				<a-checkbox :indeterminate="indeterminate" :checked="AllCheckmedia" @change="onCheckAllChange_media">
					全部
				</a-checkbox>
				<div style="padding-left: 2%;width: 90%;">
					<a-checkbox-group v-model="checkedList_media" @change="onChange_media">
						<a-checkbox v-if="i<8" :value="item.mediaName" v-for="(item,i) in media_type">
							{{ item.mediaName }}
						</a-checkbox>
					</a-checkbox-group>
					<span @click="showOtherMedia" style="padding-left: 5%;" v-if="media_type.length>=8">
                                  <span style="color: #1777FF;cursor: pointer;font-size: 12px;">查看更多类型</span><div
							style="transform: rotate(90deg);font-size: 12px;display: inline-block;color: #1777FF;margin-left: 3px;cursor: pointer">&gt;&gt;</div>
                    </span>
				</div>
			</div>
		</div>
		<!--            下拉数据-->
		<div class="topDiv" :style="collspanMedia?'display:none':''">
			<div style="width: 100%;display: flex;align-items: center;padding-left: 8%;">
				<div style="padding-left: 7.5%;width: 90%;">
					<a-checkbox-group v-model="checkedList_media2" @change="onChange_media1">
						<a-checkbox v-if="i>=8" :value="item.mediaName" v-for="(item,i) in media_type">
							{{ item.mediaName }}
						</a-checkbox>
					</a-checkbox-group>
				</div>
			</div>
		</div>
		<div class="topDiv">
			<div style="width: 8%">倾向性:</div>
			<div style="width: calc(27% + 3px);display: flex;align-items: center">
				<a-checkbox :indeterminate="indeterminate2" :checked="checkAll" @change="onCheckAllChange">
					全部
				</a-checkbox>
				<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChangeEmotional"
				                  style="padding-left: 13px;"/>
			</div>
		</div>
		<div
				style="height: 50px;width: 65%;margin-left: 5%;padding-top: 10px;padding-left: 10px;display: flex;justify-content: space-between;">
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="fazhan" @click="fazhan">
				发展趋势
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="gaishu" @click="gaishu">
				事件概述
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="meiti" @click="meiti">
				媒体首发
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="mailuo" @click="mailuo">
				事件脉络
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="qingxiangxing" @click="qingxiangxing">
				倾向性分析
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="reci" @click="reci">
				热词词云
			</div>
			<div
					style="background-color: #61A7FF;width: 100px;height: 30px;border-radius: 5px;color: white;line-height: 30px;text-align: center;cursor: pointer"
					id="fenbu" @click="fenbu">
				传播媒体分布
			</div>
		</div>
		<div class="titleDiv" id="fazhanqushi">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">发展</div>
				趋势
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden1?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden1">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden1?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden1">
			</div>
		</div>
		<div
				v-show="hidden1"
				style="width: 90%;margin-top: 10px;border: 1px solid #EFEFEF;height: 380px;margin-left: 5%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 40px">
			<div>
				在事件发展过程中,{{ trendTopData.createTime }}达到本次事件信息传播最高峰,共检测到<span
					style="color: #1679FC">{{ trendTopData.total }}</span>条信息,其中{{ trendTopMediaData.mediaType }}平台传播量最为突出,达到<span
					style="color: #1679FC">{{ trendTopMediaData.total }}</span>条。
			</div>
			<div id="lineChart" style="height: 300px;width: 1055px;margin-top: 15px">
			</div>
		</div>
		<div class="titleDiv" id="shijiangaishu">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">事件</div>
				概述
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden2?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden2">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden2?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden2">
			</div>
		</div>
		<div
				style="height: auto;width: 90%;margin-left: 5%;padding: 15px 20px;background-color: #F7F7F7; text-indent:2em;line-height: 30px;margin-top: 10px"
				v-show="hidden2">
			本事件由{{ overviewData.startDateStr }}至{{ overviewData.endDateStr }}期间,互联网上共检测到{{
				overviewData.total
			}}条信息。事件首发文章《
			{{ firstPublish.title }} 》于{{ firstPublish.publishTime }}
			发布在{{ firstPublish.informationSources }}上,首发文章倾向性为负面,{{ topData.createTime }}达到本次事件
			信息量最高峰{{ topData.total }}条,其中中性信息占比最高,{{
				lowData.createTime
			}}达到本次事件信息量最低谷{{ lowData.total }}条。具体分析如下。
		</div>
		<div class="titleDiv" id="meitishoufa">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">媒体</div>
				首发
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden3?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden3">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden3?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden3">
			</div>
		</div>
		<a-table :columns="columns" rowKey="key" item-layout="vertical" size="large" :pagination="false"
		         :data-source="startingData" style="width: 90%;margin-left: 5%;margin-top: 10px" v-show="hidden3">
            <span slot="bt" style="color: #1777FF" slot-scope="text,scope">
              {{ text }}
            </span>
		</a-table>
		<div class="titleDiv" id="shijianmailuo">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">事件</div>
				脉络
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden4?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden4">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden4?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden4">
			</div>
		</div>
		<div
				style="width: 90%;margin-top: 10px;border: 1px solid #EFEFEF;margin-left: 5%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8"
				v-show="hidden4">
			<a-timeline style="padding-left: 120px;padding-top: 35px;">

				<a-timeline-item style="height: 60px">
					<div slot="dot"
					     style="width: 120px;height: 40px;background-color: #61A7FF;color: white;line-height: 39px;border-radius: 5px">
						开始时间
					</div>
				</a-timeline-item>

				<a-timeline-item v-for="(item,i) in eventLink">
					<div style="margin-left: -110px">{{ item.publishTime }}</div>
					<img slot="dot" src="../../assets/images/circle.svg">
					<div style="height: 80px;margin-top: -28px">
						<div class="angle-wrapper" :title="item.title">
							{{ item.title }}
							<div
									style="margin-left: 50px;border: 1px solid #FE7614;color:#FE7614;border-radius: 5px;width: 50px;height: 25px;text-align: center;line-height: 22px"
									v-if="i==0">
								首发
							</div>
						</div>
						<div class="angle-wrapper-bottom">
							<div>发布媒体: <span style="color: black">{{ item.informationSources }}</span></div>
							<div>相关词: <span style="color: black">{{ item.keyword }}</span></div>
							<div>倾向性: <span style="color: #FE7614">{{ item.polarity }}</span></div>
							<div>热度: <span style="color: #FE7614">{{ item.hotCount }}</span></div>
						</div>
					</div>
				</a-timeline-item>
			</a-timeline>
		</div>
		<div class="titleDiv" id="qingxiangxingfenxi">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">倾向</div>
				性分析
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden5?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden5">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden5?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden5">
			</div>
		</div>
		<div v-show="hidden5"
		     style="width: 90%;margin-top: 10px;border: 1px solid #EFEFEF;height: 380px;margin-left: 5%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 20px">
			<div style="padding-left: 20px">
				在事件发展过程中,共检测到正面信息<span
					style="color: #039422">{{ PropensityPositiveTotal }}</span>条(占比{{ positivePercentage }}%),负面信息<span
					style="color: #FD8B3E">{{ PropensityNegativeTotal }}</span>条(占比{{ negativePercentage }}%),中性信息<span
					style="color: #1679FC">{{ PropensityNeutralTotal }}</span>条(占比{{ neutralPercentage }}%),
			</div>
			<div style="height: 300px;width: 100%;margin-top: 15px;display: flex">
				<div style="width: 50%;height: 100%;">
					<div style="padding-left: 20px">倾向性趋势</div>
					<div id="smallLineChart" style="width: 545px;height: 280px;"></div>
				</div>
				<div style="width: 50%;height: 100%;">
					<div style="padding-left: 20px">倾向性分布</div>
					<div id="pieChart" style="width: 545px;height: 280px;"></div>
				</div>
			</div>
		</div>
		<div class="titleDiv" id="reciciyun">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">热词</div>
				词云
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden6?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden6">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden6?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden6">
			</div>
		</div>
		<div v-show="hidden6"
		     style="width: 90%;margin-top: 10px;border: 1px solid #EFEFEF;height: 390px;margin-left: 5%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 20px">
			<div style="padding-left: 20px">
				通过对热词词云的分析,可以发现媒体和网民对于该事件主要关注"
				<span v-for="(item,i) in hotList" v-if="i<5">{{ item.name }}  </span>


				"等信息。
			</div>
			<div style="height: 300px;width: 100%;margin-top: 15px;display: flex">
				<div id="wordCloudChart" style="width: 545px;height: 280px;">
				</div>
				<div
						style="margin-top: 20px;margin-left: 20px;width: 480px;height: 85%;display: flex;flex-wrap: wrap;background-clip: content-box;background: #F8FAFF;">
					<div class="tableTr">
						<div class="tableTd20">序号</div>
						<div class="tableTd30">热词</div>
						<div class="tableTd50">频次</div>
					</div>
					<div class="tableTr" v-if="i<5" v-for="(item,i) in hotList2">

						<div v-if="i == 0" class="tableTd20"><img src="../../../public/img/sort1.png"
						                                          style="width: 30px"></div>
						<div v-else-if="i == 1" class="tableTd20"><img src="../../../public/img/sort2.png"
						                                               style="width: 30px"></div>
						<div v-else-if="i == 2" class="tableTd20"><img src="../../../public/img/sort3.png"
						                                               style="width: 30px"></div>
						<div v-else class="tableTd20">{{ i + 1 }}</div>

						<div class="tableTd30">{{ item.name }}</div>
						<div class="tableTd50"><span style="">{{ item.value }}</span>
							<a-progress :percent="item.decimal" :showInfo="false" style="width:55%;"
							            :strokeColor='color'/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="titleDiv" id="chuanbomeitifenbu">
			<div class="titleFontDiv">
				<div class="fontBottomLine" style="">传播</div>
				媒体分布
			</div>
			<div style="z-index: 999;padding-left:5px;">
				<img src="../../assets/images/generalDetection/28.jpg" :style="hidden7?'display:block':'display:none'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden7">
				<img src="../../assets/images/generalDetection/27.jpg" :style="hidden7?'display:none':'display:block'"
				     alt="" style="cursor: pointer;height: 18px;float:right;margin-top:5px;margin-right:10px"
				     @click="showHidden7">
			</div>
		</div>
		<div v-show="hidden7"
		     style="width: 90%;margin-top: 10px;border: 1px solid #EFEFEF;height: 616px;margin-left: 5%;background:-webkit-gradient(linear, 100% 0, 100% 100%, from(#F6F7FB), to(#fff));box-shadow:0 0 10px 1px #e8e8e8;padding: 25px 20px">
			<div style="padding-left: 20px">
				事件在媒体传播过程中,各类媒体报道总量为<span
					style="color: #1679FC">{{ informationSourcesTotal }}</span>,其中{{ mediaCount.mediaType }}占比最高位<span
					style="color: #1679FC">{{ mediaCountPercentage }}%</span>,{{ mediaCount.mediaType }}是主要传播渠道,本次事件共有<span
					style="color: #1679FC">{{
					informationSourceCount
				}}</span>家重要媒体参与报道,其中{{ mostPublishInformationSource.informationSources }}发布信息量最多为<span
					style="color: #1679FC">{{ mostPublishInformationSource.total }}</span>条。
			</div>
			<div style="height: 400px;width: 100%;margin-top: 15px;display: flex">
				<div style="width: 50%;height: 100%;">
					<div style="padding-left: 20px">媒体分布</div>
					<div id="bottomPieChart" style="width: 545px;height: 100%;margin-top: 30px"></div>
				</div>
				<div style="width: 50%;height: 100%;">
					<div style="padding-left: 20px">活跃媒体</div>
					<div id="bottomBarChart" style="width: 545px;height: 100%;margin-top: 30px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import left from './left/index'
import rightTop from './right/top'
import '@/utils/wordCloud'
import moment from 'moment';
import {getMediaTypeList,} from '@/api/eventAnalyze/eventAnalyzeResults'
import {
	statisticsEventEmotion,
	statisticsEventFirstPublish,
	statisticsEventInfo,
	statisticsEventLink,
	statisticsEventTrand,
	statisticsMedia,
	statisticsWordCloud,
} from '@/api/eventAnalyze/developmentTrend'

const columns = [
	{title: '媒体类型', dataIndex: 'mediaType', align: 'center', ellipsis: true, width: "11%"},
	{title: '发布时间', dataIndex: 'publishTime', ellipsis: true, align: 'center'},
	{title: '标题', dataIndex: 'title', ellipsis: true, align: 'center', scopedSlots: {customRender: 'bt'},},
	{title: '发布媒体', dataIndex: 'informationSources', ellipsis: true, align: 'center'},
];
const plainOptions = ['正面', '中性', '负面'];
const defaultCheckedList = ['正面', '中性', '负面'];

const checkedList_name = [];
export default {
	name: "eventAnalyzeStatistics",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			monitorDateStart: '',//开始时间
			monitorDateEnd: '',//结束时间
			timeType: 1, // 时间范围
			plainOptions,// 情感极性
			checkAll: true,// 情感极性
			checkedList: defaultCheckedList, //情感极性
			checkedListId: [], //情感极性
			AllCheckmedia: true, // 媒体类型
			indeterminate2: false,// 情感极性
			indeterminate: false,// 媒体类型
			checkedList_media: [], // 收集媒体类型名称
			checkedList_media2: [], // 收集媒体类型名称
			collspanMedia: true, // 查看更多媒体类型
			checkedList_name, // 收集媒体类型名称
			checkedList_mediaId: [], // 收集媒体类型id
			checkedList_emotional: [], // 收集情感极性名称
			media_type: [], //获取媒体类型
			trendTopMediaData: {}, // 发展趋势 上侧文字数据
			trendTotalList: {}, // 发展趋势 Y轴
			trendTopData: {}, // 发展趋势 上侧文字数据
			trendDateStrs: {}, // 发展趋势 X轴
			overviewData: {},//事件概述Data
			lowData: {},//事件概述Data 最低
			topData: {},//事件概述Data 最高
			firstPublish: {},//事件概述Data 内容
			startingData: [],//媒体首发 Data
			eventLink: [],//事件脉络 Data
			PropensityDateStrs: [],//倾向性分析 日期 曲线图
			PropensityTotalList: [],//倾向性分析 全部 曲线图
			PropensityPositiveList: [],//倾向性分析 正面 曲线图
			PropensityNegativeList: [],//倾向性分析 负面 曲线图
			PropensityNeutralList: [],//倾向性分析 中性 曲线图
			PropensityPositiveTotal: 0,//倾向性分析 正面数 饼图
			PropensityNegativeTotal: 0,//倾向性分析 负面数 饼图
			PropensityNeutralTotal: 0,//倾向性分析 中性数 饼图
			PropensityTotal: 0,//倾向性分析 总数 饼图
			positivePercentage: 0,// 正面百分比
			negativePercentage: 0,//负面百分比
			neutralPercentage: 0,//中性百分比
			informationSourcesList: [],//传播媒体分布 饼图
			informationSourcesTotal: 0,//传播媒体分布 饼图 总数
			informationSourceCount: 0,//传播媒体分布 发布信息数量最多
			mediaCount: {},//传播媒体分布 媒体数量最多
			mediaCountPercentage: 0,//传播媒体分布 媒体数量最多 百分比
			mostPublishInformationSource: {},//传播媒体分布 发布最多的媒体
			mediaTypeList: [],//传播媒体分布  柱状图
			mediaTypeNumberList: [],//传播媒体分布  柱状图
			hotList: [],//热词词云
			hotList2: [],//热词词云
			hidden1: true,
			hidden2: true,
			hidden3: true,
			hidden4: true,
			hidden5: true,
			hidden6: true,
			hidden7: true,
			showData: false,
			color: "#8674FF",
			columns,
			pagination: {
				pageSize: 10,
				showSizeChanger: true,
				total: 0,
				showQuickJumper: true,
				showTotal: total => `共 ${total} 条`,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
			},
			myChartBottomLine: undefined,
			myChartSmallLine: undefined,
			myChartPie: undefined,
			myChartBottomPie: undefined,
			myChartBottomBar: undefined,
			myChartWordCloud: undefined,
			myChartGraph: undefined,
			listFlag: 0, // 判断列表查询是根据commandId还是规则Id
			commandIds: 0,
		}
	},
	props: {
		//根据queryObj查询列表
		queryObj: {
			type: Object,
		},
		//根据commandId查询列表
		commandId: {},
		//根据commandId查询列表
		commandId2: {
			type: Object,
		},
	},
	methods: {
		// 查看更多媒体类型
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},
		// 滚动条到发展趋势
		fazhan() {
			document.getElementById("fazhanqushi").scrollIntoView()
		},

		// 滚动条到事件概述
		gaishu() {
			document.getElementById("shijiangaishu").scrollIntoView()
		},

		// 滚动条到媒体首发
		meiti() {
			document.getElementById("meitishoufa").scrollIntoView()
		},

		// 滚动条到事件脉络
		mailuo() {
			document.getElementById("shijianmailuo").scrollIntoView()
		},

		// 滚动条到倾向性分析
		qingxiangxing() {
			document.getElementById("qingxiangxingfenxi").scrollIntoView()
		},

		// 滚动条到热词词云
		reci() {
			document.getElementById("reciciyun").scrollIntoView()
		},

		// 滚动条到传播媒体分布
		fenbu() {
			document.getElementById("chuanbomeitifenbu").scrollIntoView()
		},

		// 时间 全部
		timeType1() {
			this.timeType = 1;
			this.monitorDateStart = '';
			this.monitorDateEnd = '';
			this.init();
		},

		// 时间 昨天
		timeType2() {
			this.timeType = 2;
			this.monitorDateStart = '';
			this.monitorDateEnd = '';
			this.init();
		},

		// 时间 近三天
		timeType3() {
			this.timeType = 3;
			this.monitorDateStart = '';
			this.monitorDateEnd = '';
			this.init();
		},

		// 时间 近七天
		timeType4() {
			this.timeType = 4;
			this.monitorDateStart = '';
			this.monitorDateEnd = '';
			this.init();
		},

		// 自定义时间
		timeType5() {
			this.timeType = 5;
			this.showData = !this.showData;
		},

		// 选择日期
		onChange_time() {
			this.timeType = 5;
			this.init();
		},

		// 媒体类型 (点击全部)
		onCheckAllChange_media(e) {
			this.AllCheckmedia = !this.AllCheckmedia;
			if (this.AllCheckmedia) {
				this.media_type.forEach((item, i) => {
					if (i < 8) {
						this.checkedList_media.push(item.mediaName)
						this.checkedList_mediaId.push(item.id)
					}
				});
				this.media_type.forEach((item, i) => {
					if (i >= 8) {
						this.checkedList_media2.push(item.mediaName)
						this.checkedList_mediaId.push(item.id)
					}
				})
			} else {
				this.checkedList_media.splice(0);
				this.checkedList_media2.splice(0);
				this.checkedList_mediaId.splice(0);
			}
			this.init();
		},

		// 媒体类型 (点击单个)
		onChange_media(e) {
			this.checkedList_media = [];
			this.checkedList_mediaId = [];
			this.checkedList_media = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
			this.init();
		},

		// 媒体类型（点击单个）
		onChange_media1(e) {
			this.checkedList_media2 = [];
			this.checkedList_mediaId = [];
			this.checkedList_media2 = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
			this.init();
		},

		// 情感极性单个
		onChangeEmotional(checkedList) {
			this.checkedList = [];
			this.checkedList = checkedList;
			this.checkAll = checkedList.length === plainOptions.length;
			this.init();
		},

		// 情感极性全部
		onCheckAllChange(e) {
			this.checkedList = [];
			Object.assign(this, {
				checkedList: e.target.checked ? plainOptions : [],
				indeterminate2: false,
				checkAll: e.target.checked,
			});
			this.init();
		},

		/**
		 * 控制发展趋势隐藏显示
		 */
		showHidden1() {
			this.hidden1 = !this.hidden1
		},
		/**
		 * 控制事件概述隐藏显示
		 */
		showHidden2() {
			this.hidden2 = !this.hidden2
		},
		/**
		 * 控制媒体首发隐藏显示
		 */
		showHidden3() {
			this.hidden3 = !this.hidden3
		},
		/**
		 * 控制事件脉络隐藏显示
		 */
		showHidden4() {
			this.hidden4 = !this.hidden4
		},
		/**
		 * 控制倾向性分析隐藏显示
		 */
		showHidden5() {
			this.hidden5 = !this.hidden5
		},
		/**
		 * 控制热词词云隐藏显示
		 */
		showHidden6() {
			this.hidden6 = !this.hidden6
		},
		/**
		 * 控制传播媒体分布隐藏显示
		 */
		showHidden7() {
			this.hidden7 = !this.hidden7
		},
		moment,
		disabledStartDate(current) {
			let myDate = new Date();
			let startOf = myDate.getFullYear() + "/" + (myDate.getMonth() - 1) + "/" + myDate.getDate()
			return current && current > moment().startOf('day') || current < moment().subtract(1, 'month')
		},
		disabledEndDate(current) {
			let myDate = new Date();
			let startOf = myDate.getFullYear() + "/" + (myDate.getMonth() - 1) + "/" + myDate.getDate()
			return current && current > moment().startOf('day') || current < moment().subtract(1, 'month')
		},

		drawLine() {
			let t = this
			let color = [
				'#246CFF', '#FEB0AA', '#12AEFE', '#de71fd', '#FE832E', '#0DCEFB', '#FA9CD9', '#9EFF00', '#F8FF00', '#DE71FD'
			];

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			this.myChartBottomLine = this.$echarts.init(document.getElementById('lineChart'))
			// 绘制图表
			this.myChartBottomLine.setOption({
				color: color,
				legend: {
					top: 10,
					left: '9%',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 20,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: 40,
					bottom: 15,
					left: 30,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: this.trendDateStrs,
				}],
				yAxis: [{
					show: true,
					type: "value",
					name: '',

					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					name: "",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[9],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[9], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
										offset: 0,
										color: hexToRgba(color[9], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[9], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[9], 0.1),
							shadowBlur: 10
						}
					},
					data: this.trendTotalList
				},

				]
			});
		},
		drawSmallLine() {
			let t = this
			let color = [
				'#246CFF', '#FEB0AA', '#12AEFE', '#DE71FD'
			];

			let xAxisData = ['2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06', '2021-12-07', '2021-12-08', '2021-12-09'];
			let yAxisData1 = this.dataSmallLine1;
			let yAxisData2 = this.dataSmallLine2;
			let yAxisData3 = this.dataSmallLine3;
			let yAxisData4 = this.dataSmallLine4;

			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			this.myChartSmallLine = this.$echarts.init(document.getElementById('smallLineChart'))
			// 绘制图表
			this.myChartSmallLine.setOption({
				color: color,
				legend: {
					top: 10,
					right: '25%',
					icon: 'rect',
					itemWidth: 12,
					itemHeight: 12,
					itemGap: 30,
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>
                `;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				},
				grid: {
					top: 40,
					bottom: 15,
					left: 10,
					right: 50,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: this.PropensityDateStrs,
				}],
				yAxis: [{
					show: true,
					type: "value",
					name: '',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 10
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					name: "全部",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
										offset: 0,
										color: hexToRgba(color[0], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[0], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: this.PropensityTotalList,
				}, {
					name: "正面",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
										offset: 0,
										color: hexToRgba(color[1], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[1], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: this.PropensityPositiveList,
				}, {
					name: "负面",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[2],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[2], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
										offset: 0,
										color: hexToRgba(color[2], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[2], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[2], 0.1),
							shadowBlur: 10
						}
					},
					data: this.PropensityNegativeList,
				}, {
					name: "中性",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[3],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[3], 0.5),
							shadowOffsetY: 8
						}
					},
					symbol: 'circle',//数据交叉点样式 (实心点)
					areaStyle: {
						normal: {
							color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1,
									[{
										offset: 0,
										color: hexToRgba(color[3], 0.3)
									},
										{
											offset: 1,
											color: hexToRgba(color[3], 0.1)
										}
									],
									false
							),
							shadowColor: hexToRgba(color[3], 0.1),
							shadowBlur: 10
						}
					},
					data: this.PropensityNeutralList,
				},
				]
			});
		},
		drawPie() {

			//颜色16进制换算rgba,添加透明度
			const hexToRgba = (hex, opacity) => {
				return (
						'rgba(' +
						parseInt('0x' + hex.slice(1, 3)) +
						',' +
						parseInt('0x' + hex.slice(3, 5)) +
						',' +
						parseInt('0x' + hex.slice(5, 7)) +
						',' +
						opacity +
						')'
				);
			}
			// 数据
			var chartdata = [
				{
					name: '正面',
					value: this.PropensityPositiveTotal,
				},
				{
					name: '负面',
					value: this.PropensityNegativeTotal,
				},
				{
					name: '中性',
					value: this.PropensityNeutralTotal,
				},

			];
			var radius = ['40%', '48%'];
// 颜色系列
			var color = ['#F0C5E1', '#CF6BDF', '#A6CAFF'];
			let color1 = [],
					color2 = [],
					color3 = [];
// 设置每层圆环颜色和添加间隔的透明色
			color.forEach((item) => {
				color1.push(item, 'transparent');
				color2.push(hexToRgba(item, 0.1), 'transparent');
				color3.push(hexToRgba(item, 0.1), 'transparent');
			});
			let data1 = [];
			let sum = 0;
// 根据总值设置间隔值大小
			chartdata.forEach((item) => {
				sum += Number(item.value);
			});
// 给每个数据后添加特定的透明的数据形成间隔
			chartdata.forEach((item, index) => {
				if (item.value !== 0) {
					data1.push(item, {
						name: '',
						value: sum / 99999999999999999,
						labelLine: {
							show: false,
							lineStyle: {
								color: 'transparent',
							},
						},
						itemStyle: {
							color: 'transparent',
						},
					});
				}
			});
// 每层圆环大小
			let radius2 = [Number(radius[1].split('%')[0]) + 0 + '%', Number(radius[1].split('%')[0]) + 8 + '%'];
			let radius3 = [Number(radius[1].split('%')[0]) + 8 + '%', Number(radius[1].split('%')[0]) + 16 + '%'];


			this.myChartPie = this.$echarts.init(document.getElementById('pieChart'))
			// 绘制图表
			this.myChartPie.setOption({
				title: [{
					text: '{val|' + this.PropensityTotal + '}\n{name|信息总量}',
					top: '50%',
					left: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: 14,
								fontWeight: 'normal',
								color: '#666666',
								padding: [10, 0]
							},
							val: {
								fontSize: 16,
							}
						}
					}
				}],
				grid: {
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
					containLabel: true,
				},
				legend: {
					itemWidth: 15,
					itemHeight: 15,
					itemGap: 10,
					orient: "vertical",
					top: 0,
					right: "right"
				},
				tooltip: {
					formatter: (params) => {
						if (params.name !== '') {
							return params.name + ' : ' + params.value;
						}
					},
				},
				series: [
					// 最外层圆环
					{
						type: 'pie',
						radius: radius3,
						center: ['50%', '60%'],
						hoverAnimation: false,
						startAngle: 90,
						selectedMode: 'single',
						selectedOffset: 0,
						itemStyle: {
							normal: {
								color: (params) => {
									return color1[params.dataIndex];
								},
							},
						},
						label: {
							show: true,
							position: 'outside',
							formatter: (params) => {
								let zzb = 0;
								data1.forEach((item, index) => {
									// 当前值一半加上前面的值是否大于50%（判断label朝向）
									if (index <= params.dataIndex && item.name != '') {
										if (index == params.dataIndex) {
											zzb += Number(item.value) / 2;
										} else {
											zzb += Number(item.value);
										}
									}
								});
								if (params.name != '') {
									// 若当前值一半加上前面的值的占比大于0.5三角形朝右，相反朝左
									if (zzb / sum > 0.5) {
										return params.name + "占比" + '\n' + '{txt|' + ((params.value * 100) / sum).toFixed(0) + '%}';
									} else {
										return params.name + "占比" + '\n' + '{txt|' + ((params.value * 100) / sum).toFixed(0) + '%}';
									}
								}
							},
							align: 'left',
							rich: {
								txt: {
									width: 10,
									height: 10,
									padding: [10, 0, 6, 0],
								},
							},
						},
						labelLine: {
							show: true,
							length: 15,
							length2: 60,
							lineStyle: {
								width: 2,
							},
						},
						data: data1,
						z: 666,
					},
					{
						type: 'pie',
						radius: radius2,
						center: ['50%', '60%'],
						hoverAnimation: false,
						startAngle: 90,
						selectedMode: 'single',
						selectedOffset: 0,
						itemStyle: {
							normal: {
								color: (params) => {
									return color2[params.dataIndex];
								},
							},
						},
						label: {
							show: false,
							formatter: '{b}' + ' ' + '{c}',
						},
						data: data1,
						z: 666,
					},
					{
						type: 'pie',
						radius: radius,
						center: ['50%', '60%'],
						hoverAnimation: false,
						startAngle: 90,
						selectedMode: 'single',
						selectedOffset: 0,
						itemStyle: {
							normal: {
								color: (params) => {
									return color3[params.dataIndex];
								},
							},
						},
						label: {
							show: false,
							formatter: '{b}' + ' ' + '{c}',
						},
						data: data1,
						z: 666,
					},
				],
			})
		},
		drawWorldCloud() {
			this.myChartWordCloud = this.$echarts.init(document.getElementById("wordCloudChart"))
			// 绘制图表
			this.myChartWordCloud.setOption({
				tooltip: {
					show: false
				},
				series: [{
					name: '热词分析',
					type: 'wordCloud',
					sizeRange: [14, 50],
					rotationRange: [0, 0],
					shape: 'circle',
					textPadding: 0,
					autoSize: {
						enable: true,
						minSize: 6
					},
					textStyle: {
						normal: {
							color: function () {
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: this.hotList,
				}]
			})
		},
		drawBottomPie() {

			//颜色16进制换算rgba,添加透明度
			const hexToRgba = (hex, opacity) => {
				return (
						'rgba(' +
						parseInt('0x' + hex.slice(1, 3)) +
						',' +
						parseInt('0x' + hex.slice(3, 5)) +
						',' +
						parseInt('0x' + hex.slice(5, 7)) +
						',' +
						opacity +
						')'
				);
			}
			var radius = ['40%', '48%'];
			// 颜色系列
			var color = ['#216CFD', '#FEB1A9', '#12AFFE', '#DE72FD', '#FF812A', '#0FCFFE', '#FC9FD9', '#a65e32', '#858486', '#eae80b', '#12b68e', '#97d531', '#97d531', '#bd6235', '#1780aa', '#8ace46', '#f6b394'];
			let color1 = [],
					color2 = [],
					color3 = [];
			// 设置每层圆环颜色和添加间隔的透明色
			color.forEach((item) => {
				color1.push(item, 'transparent');
				color2.push(hexToRgba(item, 0.1), 'transparent');
				color3.push(hexToRgba(item, 0.1), 'transparent');
			});
			let sum = 0;
			// 根据总值设置间隔值大小
			this.informationSourcesList.forEach((item) => {
				sum += Number(item.value);
				console.log('sum', sum);
			});
			let data1 = [];
			// 给每个数据后添加特定的透明的数据形成间隔
			this.informationSourcesList.forEach((item, index) => {
				// if (item.value !== 0) {
				data1.push(item, {
					name: '',
					value: sum / 99999999999999999999999999999,
					labelLine: {
						show: false,
						lineStyle: {
							color: 'transparent',
						},
					},
					itemStyle: {
						color: 'transparent',
					},
				});
				// }
			});
			var datalegend = [];
			for (var i = 0; i < data1.length; i++) {
				if (i % 6 == 0) {
					datalegend.push("")
				}
				datalegend.push(data1[i].name);
			}
			this.myChartBottomPie = this.$echarts.init(document.getElementById('bottomPieChart'))
			// 绘制图表
			this.myChartBottomPie.setOption({
				title: [{
					text: '{val|' + this.informationSourcesTotal + '}\n{name|信息总量}',
					top: '65%',
					left: 'center',
					textStyle: {
						rich: {
							name: {
								fontSize: 14,
								fontWeight: 'normal',
								color: '#666666',
								padding: [10, 0]
							},
							val: {
								fontSize: 16,
							}
						}
					}
				}],
				grid: {
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
					containLabel: true,
				},
				legend: {
					itemWidth: 11,
					itemHeight: 11,
					itemGap: 2,
					top: -5,
					left: '83%',
					data: datalegend,
				},
				tooltip: {
					formatter: (params) => {
						if (params.name !== '') {
							return params.name + ' : ' + params.value;
						}
					},
				},
				series: [
					// 最外层圆环
					{
						type: 'pie',
						radius: ['45%', '55%'],
						center: ['50%', '70%'],
						hoverAnimation: false,
						startAngle: 90,
						selectedMode: 'single',
						selectedOffset: 0,
						itemStyle: {
							normal: {
								color: (params) => {
									return color1[params.dataIndex];
								},
							},
						},
						label: {
							show: true,
							position: 'outside',
							formatter: (params) => {
								let zzb = 0;
								data1.forEach((item, index) => {
									// 当前值一半加上前面的值是否大于50%（判断label朝向）
									if (index <= params.dataIndex && item.name != '') {
										if (index == params.dataIndex) {
											zzb += Number(item.value) / 2;
										} else {
											zzb += Number(item.value);
										}
									}
								});
								if (params.name != '') {
									// 若当前值一半加上前面的值的占比大于0.5三角形朝右，相反朝左
									if (zzb / sum > 0.5) {
										return params.name + '\n' + '{txt|' + ((params.value * 100) / sum).toFixed(0) + '%}';
									} else {
										return params.name + '\n' + '{txt|' + ((params.value * 100) / sum).toFixed(0) + '%}';
									}
								}
							},
							align: 'left',
							rich: {
								txt: {
									width: 10,
									height: 10,
									padding: [10, 0, 6, 0],
								},
							},
						},
						labelLine: {
							show: true,
							length: 15,
							length2: 60,
							lineStyle: {
								width: 2,
							},
						},
						data: data1,
						z: 666,
					},
					{
						type: 'pie',
						radius: ['35%', '40%'],
						center: ['50%', '70%'],
						hoverAnimation: false,
						startAngle: 90,
						selectedMode: 'single',
						selectedOffset: 0,
						itemStyle: {
							normal: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [/*'#216CFD', '#FEB1A9', '#12AFFE','#DE72FD','#FF812A','#0FCFFE','#FC9FD9'*/
										{offset: 0, color: '#216CFD'},
										{offset: 0.16, color: '#FEB1A9'},
										{offset: 0.32, color: '#12AFFE'},
										{offset: 0.48, color: '#DE72FD'},
										{offset: 0.64, color: '#FF812A'},
										{offset: 0.80, color: '#0FCFFE'},
										{offset: 1, color: '#FC9FD9'},
									],
									global: false // false by default
								}
							},
						},
						label: {
							show: false,
							formatter: '{b}' + ' ' + '{c}',
						},
						data: "1",
						z: 666,
					},
				],
			})
		},
		drawBottomBar() {
			let t = this;
			this.myChartBottomBar = this.$echarts.init(document.getElementById('bottomBarChart'))
			// 绘制图表
			this.myChartBottomBar.setOption({
				grid: {
					left: '2%',
					right: '4%',
					bottom: '2%',
					top: '2%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					formatter: function (params) {
						return params[0].name + '<br/>' +
								"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
								params[0].seriesName + ' : ' + params[0].value + ' <br/>'
					}
				},
				xAxis: [{
					type: 'category',
					inverse: false,
					axisLabel: {
						show: true,
						margin: 15,
						interval: 0,
						rotate: 30,
						textStyle: {
							color: '#B6B9C0',
							fontSize: '14'
						},
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}
					},
					data: this.mediaTypeList
				}, {
					type: 'category',
					inverse: false,
					axisTick: 'none',
					axisLine: 'none',
					show: true,
					data: this.mediaTypeNumberList
				}],
				yAxis: {
					show: true,
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#D7DCED'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#B6B9C0',
							fontSize: '14'
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#EEF6FF"
						}
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '数量',
					type: 'bar',
					zlevel: 1,
					itemStyle: {
						normal: {
							barBorderRadius: [10, 10, 0, 0],
							color: new t.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
								offset: 0,
								color: '#4A93FE'
							}, {
								offset: 1,
								color: '#4A93FE'
							}]),
							shadowBlur: 0,
							shadowColor: '#4A93FE'
						},
					},
					barWidth: 10,
					data: this.mediaTypeNumberList
				},
					{
						z: 0,
						name: '背景',
						type: 'bar',
						barWidth: 20,
						barGap: '-150%',
						data: this.mediaTypeNumberList,
						itemStyle: {
							normal: {
								color: '#F4F9FF',
								barBorderRadius: [0, 0, 0, 0],
							}
						},
						emphasis: {
							itemStyle: {
								color: '#F4F9FF',
								barBorderRadius: [0, 0, 0, 0],
							},
						}
					},
				]

			})
		},
		drawGraph() {
			let t = this;
			this.myChartGraph = this.$echarts.init(document.getElementById('graphChart'))
			// 绘制图表
			this.myChartGraph.setOption({
				backgroundColor: '#F7F7F7',
				/*tooltip: {},*/
				series: [
					{
						name: '',
						type: 'graph',
						layout: 'force',

						force: {
							repulsion: 300,
							edgeLength: 100,
						},
						data: [
							{
								id: 0,
								name: '互联网诈骗',
								symbolSize: [60, 60],
								draggable: 'false',
								category: '一级',
								value: 200,
							},
							{
								id: 1,
								name: '平安潮南',
								value: 25,
								symbolSize: 40,
								category: '二级',
								draggable: 'true',
							},
							{
								id: 2,
								name: '风魔无下限',
								symbolSize: 40,
								category: '二级',
								draggable: 'true',
								value: 15,
							},
							{
								id: 3,
								name: '吉林白山马宁',
								symbolSize: 40,
								category: '二级',
								draggable: 'true',
								value: 15,
							},
							{
								id: 4,
								name: '殆知喵',
								symbolSize: 30,
								category: '三级',
								draggable: 'true',
								value: 15,
							},
							{
								id: 5,
								name: '秦网行动',
								symbolSize: 30,
								category: '三级',
								draggable: 'true',
								value: 15,
							},
						],
						links: [
							{
								source: '0',
								target: '1',
							},
							{
								source: '0',
								target: '2',
							},
							{
								source: '0',
								target: '3',
							},
							{
								source: '3',
								target: '4',
							},
							{
								source: '3',
								target: '5',
							},
						],
						categories: [
							{
								name: '一级',
							},
							{
								name: '二级',
							},
							{
								name: '三级',
							},
							{
								name: '四级',
							},
							{
								name: '五级',
							},
						],
						focusNodeAdjacency: true,
						roam: true,
						label: {
							normal: {
								show: true,
								position: 'top',
							},
						},
						lineStyle: {
							normal: {
								color: 'source',
								curveness: 0,
								type: 'solid',
							},
						},
					},
				],
			})
		},

		DateToStr(date) {
			var year = date.getFullYear();//年
			var month = date.getMonth();//月
			var day = date.getDate();//日
			var hours = date.getHours();//时
			var min = date.getMinutes();//分
			var second = date.getSeconds();//秒
			return year + "-" +
					((month + 1) > 9 ? (month + 1) : "0" + (month + 1)) + "-" +
					(day > 9 ? day : ("0" + day)) + " " +
					(hours > 9 ? hours : ("0" + hours)) + ":" +
					(min > 9 ? min : ("0" + min)) + ":" +
					(second > 9 ? second : ("0" + second));
		},

		// 根据事件类型 访问接口数据
		init() {
			if (this.timeType == 5) {
				if (this.monitorDateEnd != '' && this.monitorDateEnd != null && this.monitorDateEnd != undefined) {
					this.monitorDateEnd = this.DateToStr(new Date(this.monitorDateEnd))
				} else {
					return;
				}
				if (this.monitorDateStart != '' && this.monitorDateStart != null && this.monitorDateStart != undefined) {
					this.monitorDateStart = this.DateToStr(new Date(this.monitorDateStart))
					if (this.monitorDateEnd <= this.monitorDateStart) {
						debugger
						this.$message.error('开始时间不能大于结束时间');
						this.monitorDateEnd = '';
						return;
					}
				} else {
					return;
				}
			}
			this.checkedList_mediaId = [];
			// 媒体类型id
			let mediaTypeIdList = [];
			this.checkedList_media.forEach((item) => {
				mediaTypeIdList.push(item)
			});
			this.checkedList_media2.forEach((item) => {
				mediaTypeIdList.push(item)
			});
			for (let i = 0; i < mediaTypeIdList.length; i++) {
				for (let k = 0; k < this.media_type.length; k++) {
					if (mediaTypeIdList[i] == this.media_type[k].mediaName) {
						this.checkedList_mediaId.push(this.media_type[k].id)
					}
				}
			}

			this.checkedListId = [];
			// 情感极性
			for (let j = 0; j < this.checkedList.length; j++) {
				if (this.checkedList[j] == "正面") {
					this.checkedListId.push(1);
				} else if (this.checkedList[j] == "中性") {
					this.checkedListId.push(2);
				} else if (this.checkedList[j] == "负面") {
					this.checkedListId.push(3);
				}
			}

			var param = {};
			if (this.listFlag == 0) {
				param = {
					emotionalPolarity: this.checkedListId.join(","),
					mediaTypeId: this.checkedList_mediaId.join(","),
					timeType: this.timeType,
					type: 3,
					commandId: 0,
					endDate: this.monitorDateEnd,
					eventLevel: this.queryObj.level,
					eventTypeId: this.queryObj.id,
					startDate: this.monitorDateStart,
				};
			} else if (this.listFlag == 1) {
				param = {
					emotionalPolarity: this.checkedListId.join(","),
					mediaTypeId: this.checkedList_mediaId.join(","),
					timeType: this.timeType,
					type: 1,
					commandId: 0,
					endDate: this.monitorDateEnd,
					eventLevel: this.queryObj.level,
					eventTypeId: this.queryObj.id,
					startDate: this.monitorDateStart,
				};
			} else {
				param = {
					emotionalPolarity: this.checkedListId.join(","),
					mediaTypeId: this.checkedList_mediaId.join(","),
					timeType: this.timeType,
					type: 2,
					commandId: this.commandIds,
					endDate: this.monitorDateEnd,
					eventLevel: 0,
					eventTypeId: 0,
					startDate: this.monitorDateStart,
				};
			}

			// 获取发展趋势数据
			statisticsEventTrand(param).then(res => {
				this.trendTotalList = res.data.totalList;
				this.trendDateStrs = res.data.dateStrs;
				this.trendTopData = res.data.topData ? res.data.topData : {};
				this.trendTopMediaData = res.data.topMediaData;
				if (!this.trendTopMediaData) {
					this.trendTopMediaData = {
						total: 0,
						mediaType: ""
					}
				}

				this.drawLine();
			});

			// 获取事件概述
			statisticsEventInfo(param).then(res => {
				this.overviewData = res.data;
				this.lowData = res.data.lowData ? res.data.lowData : {};
				this.topData = res.data.topData ? res.data.topData : {};
				this.firstPublish = res.data.firstPublish ? res.data.firstPublish : {};
			});

			// 媒体首发
			statisticsEventFirstPublish(param).then(res => {
				this.startingData = res.data.firstPublishList;
			});

			// 事件脉络
			statisticsEventLink(param).then(res => {
				this.eventLink = res.data.eventLink;
				for (let i = 0; i < this.eventLink.length; i++) {
					let time = this.eventLink[i].publishTime
					let temp = new Date(time);
					var t = temp.getFullYear() + "-" + (temp.getMonth() + 1) + "-" + temp.getDate();
					this.eventLink[i].publishTime = t;

					if (this.eventLink[i].polarity == 1) {
						this.eventLink[i].polarity = "正面"
					} else if (this.eventLink[i].polarity == 2) {
						this.eventLink[i].polarity = "中性"
					} else {
						this.eventLink[i].polarity = "负面"
					}
				}
			});


			// 倾向性分析
			statisticsEventEmotion(param).then(res => {
				this.PropensityDateStrs = res.data.dateStrs;
				this.PropensityTotalList = res.data.totalList;
				this.PropensityPositiveList = res.data.positiveList;
				this.PropensityNegativeList = res.data.negativeList;
				this.PropensityNeutralList = res.data.neutralList;
				this.PropensityPositiveTotal = res.data.positiveTotal;
				this.PropensityNegativeTotal = res.data.negativeTotal;
				this.PropensityNeutralTotal = res.data.neutralTotal;
				this.PropensityTotal = res.data.infoTotal;

				// 计算百分比
				this.positivePercentage = GetPercent(this.PropensityPositiveTotal, this.PropensityTotal);
				this.negativePercentage = GetPercent(this.PropensityNegativeTotal, this.PropensityTotal);
				this.neutralPercentage = GetPercent(this.PropensityNeutralTotal, this.PropensityTotal);

				this.drawSmallLine();
				this.drawPie();
			});

			//传播媒体分布
			statisticsMedia(param).then(res => {
				this.informationSourcesTotal = 0;

				var type = [];
				var type2 = [];
				var type3 = [];
				for (let i = 0; i < res.data.mediaTypeList.length; i++) {
					this.informationSourcesTotal += res.data.mediaTypeList[i].total;
					let obj = {};
					obj.value = res.data.mediaTypeList[i].total;
					obj.name = res.data.mediaTypeList[i].mediaType;
					type.push(obj)
				}
				this.informationSourcesList = type;
				console.log('===1===', type, this.informationSourcesList);
				for (let j = 0; j < res.data.informationSourcesList.length; j++) {
					type2.push(res.data.informationSourcesList[j].informationSources);
					type3.push(res.data.informationSourcesList[j].total);
				}
				this.mediaTypeList = type2;
				this.mediaTypeNumberList = type3;

				// 给数组进行排序
				res.data.mediaTypeList.sort(compare("total"));
				this.mediaCount = res.data.mediaTypeList[0] ? res.data.mediaTypeList[0] : {};
				this.mediaCountPercentage = GetPercent(this.mediaCount.total, this.informationSourcesTotal);
				this.informationSourceCount = res.data.informationSourceCount;
				this.mostPublishInformationSource = res.data.mostPublishInformationSource ? res.data.mostPublishInformationSource : {};

				this.drawBottomPie();
				this.drawBottomBar();
			});


			// 热词词云
			statisticsWordCloud(param).then(res => {
				let total = 0;
				this.hotList = [];
				this.hotList2 = [];
				for (let i = 0; i < res.data.hotList.length; i++) {
					total += res.data.hotList[i].total;
				}
				for (let i = 0; i < res.data.hotList.length; i++) {
					let obj = {};
					obj.name = res.data.hotList[i].hotName;
					obj.value = res.data.hotList[i].total;
					this.hotList.push(obj);

					let obj2 = {};
					obj2.value = res.data.hotList[i].total;
					obj2.name = res.data.hotList[i].hotName;
					obj2.decimal = GetPercent(obj.value, total);
					this.hotList2.push(obj2);
				}
				this.drawWorldCloud();
			});


			// 排序
			function compare(prop) {
				return function (a, b) {
					let v1 = a[prop];
					let v2 = b[prop];
					// 从大到小
					return v2 - v1;

				};

			}


			function GetPercent(num, total) {
				num = parseFloat(num);
				total = parseFloat(total);
				if (isNaN(num) || isNaN(total)) {
					return "-";
				}
				return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00);
			}
		},


		getMediaType() {
			// 获取媒体类型
			getMediaTypeList().then(res => {
				this.media_type = res.data;
				this.checkedList_media = [];
				this.checkedList_media2 = [];
				if (this.media_type.length < 8) {
					for (let i = 0; i < this.media_type.length; i++) {
						this.checkedList_media.push(this.media_type[i].mediaName);
					}
				} else {
					for (let i = 0; i < 8; i++) {
						this.checkedList_media.push(this.media_type[i].mediaName);
					}
					for (let i = 8; i < this.media_type.length; i++) {
						this.checkedList_media2.push(this.media_type[i].mediaName);
					}
				}

				// 获取统计数据
				this.init();
			});
		}
	},
	mounted() {
		this.getMediaType();
	},
	watch: {
		queryObj(val, oldVal) {
			if (val != oldVal) {
				if (val.id == 9999) {
					// 点击的是自定义事件
					this.listFlag = 2;
					this.commandIds = 0;
					this.timeType = 1;
					this.monitorDateStart = '';
					this.monitorDateEnd = '';
					this.AllCheckmedia = true;
					this.checkAll = true;
					this.checkedList = defaultCheckedList;
					this.getMediaType();
				} else if (val.id == 0 && val.level == 0) {
					// 点击的全部
					this.listFlag = 0;
					this.timeType = 1;
					this.monitorDateStart = '';
					this.monitorDateEnd = '';
					this.AllCheckmedia = true;
					this.checkAll = true;
					this.checkedList = defaultCheckedList;
					this.getMediaType();
				} else {
					// 点击的不是自定义事件
					this.listFlag = 1;
					this.timeType = 1;
					this.monitorDateStart = '';
					this.monitorDateEnd = '';
					this.AllCheckmedia = true;
					this.checkAll = true;
					this.checkedList = defaultCheckedList;
					this.getMediaType();
				}
			}
		},
		// 点击的自定义事件下的子节点
		commandId(val, oldVal) {
			if (val != oldVal) {
				this.commandIds = val;
				this.timeType = 1;
				this.monitorDateStart = '';
				this.monitorDateEnd = '';
				this.listFlag = 2;
				this.AllCheckmedia = true;
				this.checkAll = true;
				this.checkedList = defaultCheckedList;
				this.getMediaType();
			}
		},
	},


}
</script>

<style scoped lang="scss">

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

input[type=checkbox]:checked + label:before { /*before为伪元素可以在元素之后添加内容*/
	display: block;
	/*	css3中的content字符编码*/
	content: "";
	/*	复选框里面的&radic;居中*/
	text-align: center;
	/*	复选框里面的&radic;大小*/
	font-size: 13px;
	/*	字体的颜色*/
	color: #3D8EF7;
	/*  复选框勾选后的背景颜色*/
	background: #3D8EF7;
	margin-left: 3px;
	margin-top: 3px;
	height: 10px;
	width: 10px;
}

input[type=checkbox] {
	/* visibility 属性规定元素是否可见*/
	visibility: hidden;
}

.checkboxClass {
	width: 18px;
	height: 18px;
	line-height: 18px;
	cursor: pointer;
	position: relative;
	border: 1px solid #ccc; /*改变复选框的边框颜色也可以不要边框*/
	display: inline-block;
}

.topDiv {
	border-bottom: 1px solid #dcdcdc;
	width: 90%;
	height: 60px;
	margin-left: 5%;
	padding-left: 10px;
	line-height: 60px;
	display: flex
}

.titleDiv {
	height: 40px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	margin-left: 5%;
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

/deep/ .ant-timeline-item-head-custom {
	background: transparent !important;
}

.angle-wrapper:before {
	content: '';
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-right-color: #eeeeee;
	position: absolute;
	left: calc(-2% - 5px);
	top: 50%;
	margin-top: -12px;
}

.angle-wrapper:after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #FFFFFF;
	position: absolute;
	left: calc(-2% - 1px);
	top: 50%;
	margin-top: -10px;
}

.angle-wrapper {
	width: 93%;
	height: 40px;
	position: relative;
	border: 2px solid #eeeeee;
	margin-left: 2%;
	background-color: white;
	line-height: 30px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	font-size: 14px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.angle-wrapper-bottom {
	display: flex;
	margin-top: 5px;
	justify-content: space-between;
	width: 70%;
	font-size: 12px;
	margin-left: 4%
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.tableTr {
	border: 1px solid #F5F8FF;
	height: 35px;
	width: 100%;
	background-color: white;
	display: flex;
	align-items: center;
	color: #A0A4AA;
}

.tableTd20 {
	width: 20%;
	text-align: center
}

.tableTd30 {
	width: 30%;
	text-align: center
}

.tableTd50 {
	width: 50%;
	text-align: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
}

/deep/ .ant-table-tbody > tr:nth-child(even) {
	background-color: #FAFAFA;
}

/deep/ .ant-table-tbody > tr > td {
	border: 0;
}

/deep/ .ant-table-thead > tr > th {
	background-color: white;
	font-weight: bold;
}

.ant-btn-primary {
	color: #ffffff;
}
</style>
